<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.style 标签内 -->
  <!-- 2.link 标签内 -->
  <!-- 3.行内样式 -->
  <style>
    /* 盒模型结构   标准   非标准 */
    /* 标准   border  padding 属于内容之外，写了就撑大盒子 */
    /* 非标准 border  padding 属于内容之外，写了就挤小内容 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* flex  弹性布局 */
    /* 容器：display:flex  谁加display：flex 谁就是容器*/
    /* 容器的轴线: 控制容器的子级（项目）的不同方向上的排列 */
    /* 容器的轴线 ：容器的横轴和纵轴   主轴和交叉轴（副轴） 默认是主轴的方向从左至右，副轴的方向从上到下   项目按照主轴线的方向排列*/
    /* 项目 ： 容器的子级叫项目  */
    /* 项目默认可以写大小了 */
    /* 主轴方向有大小，没设置副轴方向的大小，默认副轴方向的大小和容器大小一样  */
    /* 项目默认不允许超出容器大小，不会换行， 超出的话，会自动按照原大小比例缩小 */

    /* 容器的属性 */
    /* 1. flex-direction 控制主轴的方向 */
    /* row（默认值）：主轴为横轴，起点从左到右。
     row-reverse：主轴为横轴，起点从右到左。
      column：主轴为纵轴，起点从上到下。
       column-reverse：主轴为纵轴，起点从下到上。 */

    /* 2. flex-wrap 主轴是否换行 */
    /* 
      nowrap ：默认不换行
      wrap ：换行   支持多轴线   多轴线的时候副轴会有相同的间距
      wrap-reverse ： 支持换行，反向换行 */

    /* 3.justify-content 项目在主轴的对齐方式 */
    /*  
        flex-start（默认值）：左对齐  
        flex-end：右对齐
        center： 居中
        space-between：两端对齐，项目之间的间隔都相等。
        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
     */

    /* 4.align-items属性 项目在交叉轴上的对齐方式 */
    /*  
        flex-start：与交叉轴的起点对齐。
        flex-end：与交叉轴的终点对齐。
        center：与交叉轴的中点对齐。
        stretch（默认值）：轴线占满整个交叉轴。
        baseline:   以文字的底部为基准进行排列
     */


    /* 多轴线 就是换行 */
    /* 5.align-content属性 规定多轴线的对齐方式 */
    /* 
    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：轴线占满整个交叉轴。 
*/



    /* 项目的属性 */
    /* 1.order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
    /* 2.flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
    /* 3.flex-shrink属性  项目的缩小比例， 默认为1 ， 空间不足，该项目将缩小*/
    /* 主要是使某个不会被缩小，当不换行的时候，容器的位置不够了 可以加该属性 */
    /* 4. flex  flex-grow  flex-shrink flex-baise 简写  后两个属性可选 一般是flex:1;*/
    /* 5.align-self 属性允许单个项目有与其他项目不一样的对齐方式 ,可覆盖align-items属性

    flex-start：与交叉轴的起点对齐。
    flex-end：与交叉轴的终点对齐。
    center：与交叉轴的中点对齐。
    
    */


    .box {
      display: flex;
      /* flex-direction: row; */
      /* flex-wrap: wrap; */
      /* align-content: center; */

      /* justify-content: space-around;
      align-items: stretch; */
      width: 400px;
      height: 200px;
      background-color: #ccc;
    }

    .box1,
    .box2 {
      width: 100px;
      height: 50px;
    }

    .box1 {
      /* flex-shrink: 0; */
      background-color: pink;
      /* flex-grow: 4; */
      /* flex-basis: 300px; */
      align-self: flex-end;
    }

    .box2 {
      background-color: greenyellow;
      /* order: 3; */
      /* flex-grow: 2; */
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box1">3</div>
    <!-- <div class="box2">4</div>
    <div class="box1">5</div>
    <div class="box2">6</div> -->
  </div>


</body>

</html>